<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>地点详情 - 湖北理工学院校园漫游</title>
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="styles.css">
</head>

<body class="bg-gray-100">
  <div class="detail-container">
    <div class="detail-header">
      <button class="back-btn" onclick="window.location.href='index.html'">
        <i class="fas fa-arrow-left"></i> 返回地图
      </button>
      <h1 class="location-title" id="detailTitle">地点名称</h1>
    </div>

    <div class="detail-content">
      <div class="image-container">
        <img src="" alt="地点图片" class="location-image" id="locationImage">
      </div>
      
      <div class="location-details">
        <div class="detail-section">
          <h3>地点介绍</h3>
          <p id="detailDescription">地点详细描述将在这里显示...</p>
        </div>
        
        <div class="detail-section">
          <h3>主要特点</h3>
          <ul class="features-list" id="featuresList">
            <!-- 特点列表将通过JavaScript动态生成 -->
          </ul>
        </div>
        
        <div class="detail-section">
          <button class="nav-btn" onclick="window.location.href='index.html'">
            <i class="fas fa-map-marked-alt"></i> 返回地图查看位置
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    // 页面加载时获取地点信息并显示
    document.addEventListener('DOMContentLoaded', function() {
      // 从localStorage获取地点信息
      const locationData = localStorage.getItem('currentLocation');
      const locationId = localStorage.getItem('locationId');
      
      if (locationData) {
        const location = JSON.parse(locationData);
        
        // 更新页面内容
        document.getElementById('detailTitle').textContent = location.title;
        document.getElementById('detailDescription').textContent = location.fullDesc;
        
        // 设置图片（如果有）
        const imgElement = document.getElementById('locationImage');
        if (location.image) {
          imgElement.src = location.image;
          imgElement.alt = `${location.title}图片`;
        } else {
          imgElement.src = `https://picsum.photos/seed/${locationId}/600/400`;
          imgElement.alt = `${location.title}示意图`;
        }
        
        // 生成特点列表
        const featuresList = document.getElementById('featuresList');
        location.features.forEach(feature => {
          const li = document.createElement('li');
          li.textContent = feature;
          featuresList.appendChild(li);
        });
      } else {
        // 如果没有获取到地点信息，返回地图页面
        window.location.href = 'index.html';
      }
    });
  </script>
</body>

</html>
